<template>
  <t-dialog
    :visible="visible"
    header="上传报告生成大纲"
    :close-btn="true"
    cancel-btn="取消"
    :on-close="close"
  >
    <template #body>
      <div class="m-upload-box">
        <div class="m-upload-box__upload">
          <t-upload
            v-model="baseFile"
            accept="application/*"
            :showUploadProgress="false"
            :requestMethod="requestMethod"
          />
        </div>
      </div>
    </template>
    <template #footer>
      <t-button variant="outline" @click="close">取消</t-button>
      <t-button @click="submit" :loading="submitLoading">确定</t-button>
    </template>
  </t-dialog>
</template>

<script setup>
import { ref, reactive,computed,watch } from "vue";
import { MessagePlugin } from 'tdesign-vue-next';

import { uploadFile } from '@/api'
const emits = defineEmits(["update:visible","submit"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const visible = computed(()=>props.visible)
watch(visible,()=>{
  baseFile.value = [];
})
const baseFile = ref([]);
const submitLoading = ref(false);
const close = () => {
  emits("update:visible", false);
};
const submit = () => {
    if (!baseFile.value.length) {
      return MessagePlugin.error("请选择文件");
    }
    if (baseFile.value.length > 1) {
      return MessagePlugin.error("只能选择一个文件");
    }
  const fd = new FormData();
  fd.append("files", baseFile.value[0].raw);
  submitLoading.value = true;
  emits("submit", fd);
  emits("update:visible", false);
  submitLoading.value = false;

};
const requestMethod = (file) => {
  return new Promise((resolve) => {
    console.log('[ file ] >', file)
    resolve({ status: "success" });
    // //只限制文件类型表格类型
    //   const isLimitType =
    //       file.name.indexOf("xls") > -1 ||
    //       file.name.indexOf("xlsx") > -1 ||
    //       file.name.indexOf("sheet") > -1 
    //       if(isLimitType){
    //         resolve({ status: "success" });
    //       }else{
    //          resolve({ status: 'fail',error:'支持文件有：xls、xlsx、sheet格式' });
    //       }
    
  });
};


</script>
<style lang="less" scoped>
.m-upload-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .m-upload-box__upload {
    display: flex;
    gap: 10px;
    .m-text {
      margin-top: 6px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 16px;
    }
  }
  .m-template {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 174, 89, 0.1);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #c7eac5;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #0fae59;
    padding: 8px 10px;
  }
}
</style>